<template>
	<view class="left-bubble-container">
		<view class="bubble">
			<span style="direction: ltr; unicode-bidi: bidi-override">
				<text>{{ props.message }}</text>
			</span>
		</view>
	</view>
</template>
<script setup lang="ts">
	interface propsI {
		message : string;
		avatarUrl : string;
	}

	const props = withDefaults(defineProps<propsI>(), {
		avatarUrl: "https://bkimg.cdn.bcebos.com/pic/f11f3a292df5e0fe9653c7d1526034a85fdf7292",
	});
</script>
<style lang="scss" scoped>
	.left-bubble-container {
		display: flex;
		direction: rtl;
		margin: 10px 0;

		.right {
			image {
				height: 50px;
				width: 50px;
				border-radius: 5px;
			}
		}
	}

	.bubble {
		margin-bottom: 56rpx;
		max-width: 560rpx;
		margin-right: 32rpx;
		padding: 20rpx 22rpx 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		background: rgba(23, 21, 21, 1);
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 40rpx;
		color: rgba(255, 255, 255, 1);
		text-align: left;
		vertical-align: top;
	}

	// .bubble::after {
	// 	position: absolute;
	// 	top: 15px;
	// 	right: -20px;
	// 	content: "";
	// 	width: 0;
	// 	height: 0;
	// 	border-right: 10px solid transparent;
	// 	border-bottom: 10px solid transparent;
	// 	border-left: 10px solid #ffffff;
	// 	border-top: 10px solid transparent;
	// }
</style>